<template>
  {{number}}

  <div class="flop-wrap">
    <v-flop v-for="(num, index) in String(number)" :key="index" :number="getNumberByIndex(index)" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import vFlop from "./Flop.vue";

export default defineComponent({
  name: "FlopWrap",
  components: { vFlop },

  props: ['number'],

  methods: {
    getNumberByIndex(index: number){
      return String(this.number).charAt(index)
    }
  }
});
</script>

<style lang="scss">
  .flop-wrap{

    // width: 400px;
    display: flex;
    justify-content: center;
    border: 1px solid #111;
  }
</style>